<!DOCTYPE html>
<html class="javascript js cssanimations">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>72公社</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">
    <meta name="apple-mobile-web-app-title" content="72公社">
    <meta name="format-detection" content="telephone=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" href="../../css/amaze.min.css" />
    <link rel="stylesheet" href="../../css/amazeui.min.css" />
    <link rel="stylesheet" href="../../css/app.css">
    <!--[if (gte IE 9)|!(IE)]>
        <!-->
    <script type="text/javascript" src="../../script/jquery.min.js"></script>
    <!--<![endif]-->
    <!--[if lt IE 9]>
            <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
                
            </script><script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js">
                
            </script><script src="http://a.static.amazeui.org/assets/2.x/js/polyfill/rem.min.js">
                
            </script><script src="http://a.static.amazeui.org/assets/2.x/js/polyfill/respond.min.js">
                
            </script><script src="http://a.static.amazeui.org/assets/2.x/js/amazeui.legacy.js">
                
            </script>
        <![endif]-->
    <script src="../../script/amazeui.min.js"></script>
    <script type="text/javascript" src="../../script/api.js"></script>
    <style type="text/css">
    /*头部背景*/
    
    .am-header-default {
        background-color: #f40;
    }
    /*分类样式*/
    
    .am-menu-dropdown1 .am-menu-nav>li>a {
        border-bottom: 1px solid #d63900;
        background: #f40;
    }
    
    .am-menu-dropdown1 .am-menu-nav>li.am-parent.am-open>a {
        background: #e63d00;
    }
    /*按钮样式*/
    
    .am-btn-primary:hover {
        color: #fff;
        background-color: #c23400;
        border-color: #c23400;
    }
    
    .am-btn-primary {
        color: #fff;
        background-color: #f40;
        border-color: #f40;
    }
    
    .this {
        background: white;
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
        padding: 15px;
        border-bottom: 1px solid #feebdc;
        border-right: 1px solid #feebdc;
    }
    
    .this i {
        color: #ff8000;
    }
    </style>

<script type="text/javascript" src="js/recharge.js"></script>

<style type="text/css">
	.amount{background: #ffaa43;text-align: center;color: white;padding: 5px;}
    .noamount{background: #cccccc;text-align: center;color: white;padding: 5px;}
</style>
</head>
<body>

<div class="am-g am-topbar-fixed-top" style=";padding:0 0;background:#ffaa43;height:45px;">
	<a onclick="api.closeWin()">
	<div class="am-u-sm-3" style="margin-top:10px;text-align:left">

		<span class="am-icon-angle-left am-icon-sm" style="color:white;"></span>

	</div> 
	</a>

	<div class="am-u-sm-6" style="margin-top:10px;font-family:微软雅黑;color:white;text-align:center;">
		话费充值
	</div>

	<a href="/wap">
	<div class="am-u-sm-3" style="margin-top:11px;text-align:right">
	</div> 
	</a>

</div>


<div class="am-g">
	
	<div class="am-u-sm-12" style="margin-top: 10px;">
		<div class="am-u-sm-12" style="margin:0px;padding: 0px;">
			<div class="am-form-icon">
				<i class="am-icon-mobile-phone"></i>
				<input type="tel" name="mobile" id="mobile" class="am-form-field" placeholder="输入有效手机号" >
			</div>
		</div>
		<span id="gsd" style="color:red;margin-top:5px;"></span>
	</div>
	
	<!--面额-->
	<div class="am-u-sm-12" style="margin-top: 10px;">
		<div class="am-u-sm-3" style="padding-left: 0px;">
			<div class="am-u-sm-12 amount" id="m1">
				30
			</div>
		</div>
		
		<div class="am-u-sm-3" style="padding: 0px 5px 0px 5px;">
			<div class="am-u-sm-12 amount" id="m2">
				50
			</div>
		</div>
		
		<div class="am-u-sm-3" style="padding: 0px 5px 0px 5px;">
			<div class="am-u-sm-12 amount" id="m3">
				100
			</div>
		</div>
		
		<div class="am-u-sm-3 " style="padding-right: 0px;">
			<div class="am-u-sm-12 noamount" id="m4">
				200
			</div>
		</div>
		
	</div>
	
	<div class="am-u-sm-12" style="margin-top: 10px;">
		<div class="am-u-sm-3 " style="padding-left: 0px;">
			<div class="am-u-sm-12 noamount" id="m5">
				300
			</div>
		</div>
		
		<div class="am-u-sm-3" style="padding: 0px 5px 0px 5px;">
			<div class="am-u-sm-12 noamount" id="m6">
				400
			</div>
		</div>
		
		<div class="am-u-sm-3" style="padding: 0px 5px 0px 5px;">
			<div class="am-u-sm-12 noamount" id="m7">
				500
			</div>
		</div>
		
		<div class="am-u-sm-3" style="padding-right: 0px;">
			<div class="am-u-sm-12 noamount" id="m8">
				1000
			</div>
		</div>
		
	</div>
	
	
<!-- 	<div class="am-u-sm-12" style="margin-top: 10px;">
		<select id="payType" class="am-form-field">
			
		</select>
	</div> -->
	
	<div class="am-u-sm-12" style="margin-top: 10px;">
		<button id="cz_but" onclick="recharge();" type="button" style="border-radius:5px;" class="am-btn-block am-btn am-btn-warning am-btn-sm">
			去支付
		</button>
	</div>
	
</div>
